<template>
    <view class="page padding30">
        <view class="list mini d-flex a-center">
            <view class="color_80">字段名：</view>
            <input class="flex-1" v-model="queryParams.config_name" />
        </view>
        <view class="list padding20">
            <picker mode="selector" :range="typeList" range-key="name" @change="typeChange">
                <view class="d-flex">
                    <view class="color_80">选择类型：</view>
                    <block v-for="(item,index) in typeList" :key="index">
                        <view v-if="item.couId == queryParams.couId">{{ item.name }}</view>
                    </block>
                </view>
            </picker>
        </view>
        <view class="list padding20">
            <view class="color_80">是否必填</view>
            <view class="row m-top20">
                <view class="d-flex a-center m-right40" @click="queryParams.config_must = String(index)" v-for="(item,index) in ['否','是']" :key="index">
                    <view class="radioRound m-right10 p-re" :class="{'active': queryParams.config_must == index}"></view>
                    <view>{{ item }}</view>
                </view>
            </view>
        </view>
        <view class="list padding20" v-if="!['8','10','11','12','15'].includes(queryParams.couId)">
            <view class="d-flex">
                <view class="flex-1 color_80">初始内容</view>
                <text class="iconfont icon-zengjia size38" @click="handleAdd" v-if="['2','5','9'].includes(queryParams.couId)"></text>
            </view>
            <view class="row j-sb" v-if="['2','5','9'].includes(queryParams.couId)">
                <block v-for="(item,index) in options" :key="index">
                    <input class="name bor_cc m-top20" v-model="options[index]" />
                </block>
            </view>
            <textarea v-else class="wh h6 m-top20" v-model="queryParams.config_content" placeholder="请输入内容" :maxlength="-1" auto-height disable-default-padding />
        </view>
        <!-- 数字输入框 -->
        <view class="list mini d-flex a-center">
            <view class="color_80">排序：</view>
            <input class="flex-1" type="number" v-model="queryParams.sort" />
        </view>
        
        <view class="list mini" v-if="queryParams.couId == 5">
            <input class="height" type="number" v-model="queryParams.other" placeholder="最多可选数量，0为不限制" />
        </view>
        <view class="list mini" v-if="queryParams.couId == 8">
            <input class="height" type="number" v-model="queryParams.other" placeholder="最大允许上传个数，1~9" />
        </view>
        <view class="list padding20" v-if="queryParams.couId == 10">
            <picker mode="selector" :range="modeList" range-key="name" @change="modeChange">
                <view class="d-flex">
                    <view class="color_80">组合方式：</view>
                    <block v-for="(item,index) in modeList" :key="index">
                        <view v-if="item.other == queryParams.other">{{ item.name }}</view>
                    </block>
                </view>
            </picker>
        </view>
        <view class="list padding20" v-if="queryParams.couId == 11">
            <view class="color_80">资料名</view>
            <view class="row j-sb">
                <block v-for="(item,index) in queryParams.otherArr" :key="index">
                    <input class="name bor_cc m-top20" v-model="queryParams.otherArr[index]" />
                </block>
            </view>
        </view>
        <view class="list mini" v-if="queryParams.couId == 15">
            <input class="height" type="number" v-model="queryParams.maxNum" placeholder="最大值，0为不限制" />
        </view>

        <view class="d-flex j-sa m-top80">
            <!-- <view class="bot_btn flexac color_99">重置</view> -->
            <view class="bot_btn flexac white" @click="submit">提交</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                queryParams: {
                    config_name: '',
                    couId: '1',
                    config_must: '0',
                    sort: '99',
                    // 非必传
                    config_content: '',
                    other: '',
                    otherArr: ['','','','','','','','',''],
                    maxNum: ''
                },
                typeList: [
                    { name: '单行输入', couId: '1' }, { name: '下拉选择', couId: '2' },
                    { name: '文本输入', couId: '4' }, { name: '单选框', couId: '9' },
                    { name: '复选框', couId: '5' }, { name: '地区联动', couId: '6' },
                    { name: '图片上传', couId: '8' }, { name: '日期时间框', couId: '10' },
                    { name: '资料收集', couId: '11' }, { name: '文件上传', couId: '13' }, 
                    { name: '定位地址', couId: '14' }, { name: '纯数字', couId: '15' }
                ],
                orderId: '', // 表单id
                id: '0', // 表单项id、0为添加
                modeList: [
                    { name: '年-月', other: 'yearToMonth' }, { name: '年-月-日', other: 'date' },
                    { name: '年-月-日 上/下午', other: 'yearToPA' }, { name: '年-月-日 时:分', other: 'yearToMinute' },
                    { name: '年-月-日 时:分:秒', other: 'dateToTime' }, { name: '月-日', other: 'monthToDay' },
                    { name: '月-日 上/下午', other: 'monthToPA' }, { name: '月-日 时:分', other: 'monthToMinute' },
                    { name: '时:分:秒', other: 'time' }
                ],
                options: ['','']
            }
        },
        onLoad(e) {
            if(e.order_id) this.orderId = e.order_id
            if(e.id) this.id = e.id
            if(e.id) this.getInfo()
        },
        methods: {
            getInfo() {
                this.$http.post({
                    url: '/SRA_CustomerForm/getItemInfo',
                    data: {
                        bid: uni.getStorageSync('bid'),
                        orderId: this.orderId,
                        id: this.id
                    }
                }).then(res => {
                    if(res.code != 100) return this.$Toast(res.msg)
                    let result = res.data
                    this.queryParams.couId = result.config_type
                    for(let key in this.queryParams) {
                        if(result[key] != undefined) {
                            if(key == 'otherArr' && result.config_type != 11) {
                                this.options = result[key]
                            } else {
                                this.queryParams[key] = result[key]
                            }
                        }
                    }
                    console.log(this.queryParams)
                })
            },
            typeChange(e) {
                let index = e.detail.value
                this.queryParams.couId = this.typeList[index].couId
                this.queryParams.other = '' 
                this.queryParams.config_content = ''    
            },
            modeChange(e) {
                let index = e.detail.value
                this.queryParams.other = this.modeList[index].other
            },
            handleAdd() {
                this.options.push('')
            },
            submit() {
                let data = {
                    bid: uni.getStorageSync('bid'),
                    store_id: uni.getStorageSync('store_id'),
                    orderId: this.orderId,
                    id: this.id,
                    ...this.queryParams
                }
                if(!data.config_name) return this.$Toast('字段名不能为空')
                if(data.couId == 8) {
                    if(data.other < 1) data.other = '1'
                    if(data.other > 9) data.other = '9'
                }
                if(['2','5','9'].includes(data.couId)) { // 选项用|分隔
                    let arr = this.options.filter(Boolean)
                    data.config_content = arr.join('|')
                }
                if(data.couId == 11) {
                    data.otherArr = JSON.stringify(data.otherArr)
                } else {
                    delete data.otherArr
                }
                if(data.couId != 15) delete data.maxNum
                console.log(data)

                this.$http.post({
                    url: '/SRA_CustomerForm/addAppointmentFormItem',
                    data
                }).then(res => {
                    this.$Toast(res.msg)
                    if(res.code != 100) return
                    if(this.id == 0) this.id = res.data
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .list {
        background: #fff;
        border-radius: 10rpx;
        padding-left: 40rpx;
        margin-bottom: 20rpx;
        position: relative;
        &.mini {
            height: 80rpx;
        }
        .name {
            width: 300rpx;
            height: 60rpx;
            border-radius: 4rpx;
        }
    }
    .radioRound {
        width: 28rpx;
        height: 28rpx;
        border: 1rpx solid #ddd;
        border-radius: 50%;
        &.active {
            border: 1rpx solid $color;
            &::after {
                content: '';
                width: 12rpx;
                height: 12rpx;
                background: $color;
                border-radius: 50%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
    .bot_btn {
        width: 260rpx;
        height: 80rpx;
        border-radius: 10rpx;
        font-size: 30rpx;
        letter-spacing: 6rpx;
        &:first-child {
            background: #EAEAEA;
        }
        &:last-child {
            background: $color;
        }
    }
</style>